<template>
  <!--    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
  <div class="Home">
    <Head msg="车源报价网" backimg="1"></Head>
    <img
      class="home-menu"
      src="../../public/img/icons/icon-menu.png"
      @click="openmenu"
    />
    <div class="search-main">
      <div>一键搜索：</div>
      <input
        class="search-input"
        placeholder="输入关键字，如：宝马，奔驰"
        v-model="keyword"
      />
      <div class="search-btn" @click="search">搜索</div>
    </div>

    <div class="scroll-body">
      <cube-scroll
        ref="scroll"
        :data="list"
        :options="options"
        @pulling-up="getHomeData"
      >
        <div class="article-main">
          <div id="222"></div>
          <div id="333"></div>
          <div v-for="item in list" :key="item.id">
            <div class="article-list" @click="toarticledetail(item.id)">
              <img
                :src="
                  item.photo
                    ? item.photo
                    : publicPath + 'img/icons/icon-article-default.png'
                "
                class="article-pic"
              />
              <div class="article-content">
                <div class="article-title">{{ item.title }}</div>
                <div class="article-information">
                  <div>作者：{{ item.author }}</div>
                  <!--                                <div>评论：{{item.comment}}</div>-->
                  <div>阅读：{{ item.view }}</div>
                  <div>时间：{{ item.create_time }}</div>
                </div>
              </div>
            </div>
            <Adv
              v-if="item.adv"
              :type="item.adv.advtype"
              :value="item.adv.advvalue"
              :advurl="item.adv.advurl"
              :advcover="item.adv.advcover"
              :advtitle="item.adv.advtitle"
              :showtitle="item.adv.showtitle"
            ></Adv>
          </div>
        </div>
      </cube-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';
import Adv from '@/components/Adv.vue';

@Component({
  components: {
    Head,
    Adv,
  },
})
export default class Home extends Sence {
  private publicPath: string = process.env.BASE_URL;
  public keyword: string = '';
  public page: number = 1;
  public size: number = 10;
  public list: any = [];
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载
  public mounted(): void {
    this.showLoading();
    this.hideLoading();

    const keyword: any = this.$route.query.keyword;
    if (keyword) {
      this.keyword = keyword;
    }
    this.getHomeData();
    this.wxshare();
  }

  //首页文章数据
  public getHomeData(): void {
    this.post('api/v1/getHomeData', {
      keyword: this.keyword,
      page: this.page,
      size: this.size,
    }).then((res: any) => {
      let list = [...this.list, ...res.data.articleList];
      for (let i = 0; 3 + 8 * i < list.length; i++) {
        if (!list[3 + 8 * i].adv) {
          this.articleListsAdv(3 + 8 * i);
        }
      }
      this.list = list;
      this.page += 1;
      if (res.data.articleList.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //广告接口
  public articleListsAdv(number: any): any {
    const that: any = this;
    this.post('api/v1/articleListsAdv', {}).then((res: any) => {
      let data = res.data;
      let advtype = data.adv_type;
      let advvalue = '';
      let advurl = '';
      let advcover = '';
      let advtitle = data.adv_title;
      let showtitle = data.show_title;
      if (data.adv_type == 1) {
        advvalue = data.ele_id;
      } else if (data.adv_type == 2) {
        advvalue = data.adv_img;
        advurl = data.adv_img_url;
      } else if (data.adv_type == 3) {
        advvalue = data.adv_video;
        advurl = data.adv_video_url;
        advcover = data.adv_video_cover;
      }
      that.$set(this.list[number], 'adv', {
        advtype,
        advvalue,
        advurl,
        advcover,
        advtitle,
        showtitle,
      });
      this.$nextTick(() => {
        (this.$refs.scroll as any).refresh();
      });
    });
  }

  //前往文章详情
  public toarticledetail(id: number): void {
    this.$router.push(`/articledetail?id=${id}`);
  }

  //关键字搜索
  public search(): void {
    this.page = 1;
    this.list = [];
    this.options = {
      pullUpLoad: true,
    };
    this.getHomeData();
  }

  //打开菜单
  public openmenu(): void {
    (<any>this)
      .$createActionSheet({
        title: '',
        data: [
          {
            content: '文章管理',
            value: 'article',
          },
          {
            content: '发表文章',
            value: 'add',
          },
          {
            content: '车源管理',
            value: 'car',
          },
          {
            content: '发布车源',
            value: 'caradd',
          },
          {
            content: '复制链接',
            value: 'copy',
          },
          {
            content: '帮助与反馈',
            value: 'help',
          },
        ],
        onSelect: (item: any, index: number) => {
          switch (item.value) {
            case 'copy':
              const data: string =
                this.apiurl + 'dist/#' + (<any>this).$route.fullPath;
              this.copy(data);
              this.toast('链接复制成功');
              break;
            case 'article':
              if (this.getuser()) {
                if (this.getuser().is_dealer) {
                  this.$router.push('/article');
                } else {
                  this.goToDealer();
                }
              } else {
                this.goToLogin();
              }
              break;
            case 'add':
              if (this.getuser()) {
                if (this.getuser().is_dealer) {
                  this.post('api/v1/checkRepPoint', {}).then((res: any) => {
                    (<any>this).$router.push('/articleadd');
                  });
                } else {
                  this.goToDealer();
                }
              } else {
                this.goToLogin();
              }
              break;
            case 'car':
              if (this.getuser()) {
                if (this.getuser().is_dealer) {
                  this.$router.push('/mycar');
                } else {
                  this.goToDealer();
                }
              } else {
                this.goToLogin();
              }
              break;
            case 'caradd':
              if (this.getuser()) {
                if (this.getuser().is_dealer) {
                  this.post('api/v1/checkRepPoint', {}).then((res: any) => {
                    this.$router.push('/mycaradd');
                  });
                } else {
                  this.goToDealer();
                }
              } else {
                this.goToLogin();
              }
              break;
            case 'help':
              this.$router.push('/help');
              break;
          }
        },
      })
      .show();
  }

  //微信分享
  public wxshare(): void {
    this.post('api/v1/getWxShare', {
      object_type: 'home',
      object_id: 0,
      refer_url: this.referurl(window.location.href),
    }).then((res: any) => {
      let config: any = res.data.share_config;
      let info: any = res.data.share_info;
      (<any>window).wx.config({
        debug: config.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: config.jsApiList, // 必填，需要使用的JS接口列表
      });
      (<any>window).wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        (<any>window).wx
          .onMenuShareAppMessage({
            title: info.title, // 分享标题
            desc: info.desc, // 分享描述
            link: info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: info.imgUrl, // 分享图标
            type: 'link',
            success: function() {},
          })(<any>window)
          .wx.onMenuShareQQ({
            title: info.title, // 分享标题
            desc: info.desc, // 分享描述
            link: info.link, // 分享链接
            imgUrl: info.imgUrl, // 分享图标
            success: function() {
              // 用户确认分享后执行的回调函数
            },
          });
      });
    });
  }
}
</script>

<style scoped lang="stylus">
* {
  box-sizing: border-box;
}

.home-menu {
  position: absolute;
  top: 7px;
  right: 10px;
  height: 30px;
  width: 30px;
  z-index: 100;
}

.scroll-body {
  height: calc(100vh - 45px - 50px - 45px);
}

.search-main {
  background: #efeff4;
  height: 45px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
  justify-content: space-between;

  .search-input {
    height: 24px;
    width: 54vw;
    border: 1px solid #808080;
  }

  .search-btn {
    width: 16vw;
    height: 26px;
    line-height: 28px;
    background: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
  }
}

.article-main {
  margin-top: 5px;

  .article-list {
    margin-bottom: 5px;
    padding: 10px;
    background: #efeff4;
    display: flex;
    flex-direction: row;

    .article-pic {
      width: 24vw;
      height: 18vw;
    }

    .article-content {
      width: calc(100vw - 24vw - 20px);
      padding-left: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .article-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 20px;
        font-weight: bold;
      }

      .article-information {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        div {
          font-size: 10px;
          color: #808080;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
